<template>
  <div class="home">
 
      <div class="site-nav-bd">
        <ul class="site-nav-bd-l" >
          <div>
            <li class="login">
              <router-link class="toLogin" to="/LoginView"
                >亲，请登录</router-link
              >
            </li>
            <li class="register">
              <router-link class="toRegister" to="/RegisterView"
                >免费注册</router-link
              >
            </li>
          </div>
          <!-- <li>网页无障碍</li> -->
        </ul>
        <div class="site-nav-bd-r">
          <ul>
            <li v-if="this.$route.path !== '/'"><a href="/" class="changefont">淘宝网首页</a></li>
            <li v-if="this.$route.path !== '/PurchasedView'"><router-link to="/PurchasedView" class="changefont"> 已买到的宝贝</router-link></li>

            <!-- <li @mouseenter="taobao = true" @mouseleave="taobao = false">
              我的淘宝<i class="iconfont icon-xiala"></i>
            </li> -->

            <li v-if="this.$route.path !== '/ShoppingCart'">
              <i class="iconfont icon-gouwuche"></i
              ><router-link class="toShoppingCart" to="/ShoppingCart"
                >购物车</router-link
              >
            </li>
            <li @mouseenter="shoucang = true" @mouseleave="shoucang = false" class="changefont">
              <i class="iconfont icon-shoucang"></i>收藏夹<i
                class="iconfont icon-xiala"
                 :class="{changed: shoucang}"
              ></i>
            </li>
            <!-- <li @mouseenter="openshop = true" @mouseleave="openshop = false">
              免费开店<i class="iconfont icon-xiala"></i>
            </li>
            <li @mouseenter="qianniu = true" @mouseleave="qianniu = false">
              千牛卖家中心<i class="iconfont icon-xiala"></i>
            </li> -->
            <li
              @mouseenter="helpcenter = true"
              @mouseleave="helpcenter = false"
              class="changefont"
            >
              帮助中心<i class="iconfont icon-xiala" :class="{changed:helpcenter}"></i>
            </li>
          </ul>
        </div>
      </div>
      <!-- <div
        class="div1"
        @mouseenter="taobao = true"
        @mouseleave="taobao = false"
      /> -->
      <!-- <div
        class="under-my-taobao"
        v-show="taobao"
        @mouseenter="taobao = true"
        @mouseleave="taobao = false"
      >
        <ul>
          <li>我的足迹</li>
          <li>我的卡券包</li>
        </ul>
      </div> -->

      <div
        class="div2"
        @mouseenter="shoucang = true"
        @mouseleave="shoucang = false"
      ></div>
      <div
        class="under-shoucang"
        v-show="shoucang"
        @mouseenter="shoucang = true"
        @mouseleave="shoucang = false"
      >
        <ul>
          <li><router-link to="/FavoriteBabyView" class="hometoFavoriteBabyView" >收藏的宝贝</router-link></li>
          <li><router-link to="/FavoriteShopView" class="hometoFavoriteShopView">收藏的店铺</router-link></li>
        </ul>
      </div>

      <!-- <div
        class="div3"
        @mouseenter="openshop = true"
        @mouseleave="openshop = false"
      ></div> -->
      <!-- <div
        class="under-openshop"
        v-show="openshop"
        @mouseenter="openshop = true"
        @mouseleave="openshop = false"
      >
        <ul>
          <li>淘宝开店</li>
          <li>天猫开店</li>
          <li>开直播店</li>
        </ul>
      </div> -->

      <!-- <div
        class="div4"
        @mouseenter="qianniu = true"
        @mouseleave="qianniu = false"
      ></div>
      <div
        class="under-qianniu"
        v-show="qianniu"
        @mouseenter="qianniu = true"
        @mouseleave="qianniu = false"
      >
        <ul>
          <li>开店入驻</li>
          <li>已卖出的宝贝</li>
          <li>出售中的宝贝</li>
          <li>卖家服务市场</li>
          <li>卖家培训中心</li>
          <li>体检中心</li>
          <li>淘宝规则</li>
        </ul>
      </div> -->

      <div
        class="div5"
        @mouseenter="helpcenter = true"
        @mouseleave="helpcenter = false"
      ></div>
      <div
        class="under-helpcenter"
        v-show="helpcenter"
        @mouseenter="helpcenter = true"
        @mouseleave="helpcenter = false"
      >
        <ul>
          <li>官方客服</li>
          <li>商家客服</li>
          <li>消息帮助</li>
          <li>举报中心</li>
          <li>意见反馈</li>
        </ul>
      </div>
 
  </div>
</template>
<style scoped>
.home{
  width: 1700px;
}
.changefont{
  font-size: 16px !important;
}
.hometoFavoriteBabyView{
  text-decoration: none;
  color: #2c3e50;
}
.hometoFavoriteShopView{
  text-decoration: none;
  color: #2c3e50;
}
.site-nav-bd {
  position: relative;
  margin: 0;
  
  margin-left: -35px;
  width: 1700px;
  height: 35px;
  background: #fff;
  box-sizing: border-box;
 
  -webkit-backface-visibility: hidden;
  line-height: 6px;
  font-size: 14px;
}

.site-nav-bd-l {
  font-size: 16px;
  position: relative;
  margin-top: 15px;
  margin-left: 80px;
  float: left;
  display: flex;
  list-style-type: none;
  padding: 0;
}

.site-nav-bd-r {
  font-size: 16px;
  float: right;
  width: 580px;
  height: 60px;
}
.site-nav-bd-r a {
  font-size: 16px;
  color: #2c3e50;
  text-decoration: none;
}

.site-nav-bd-r ul {
    font-size: 16px;
  list-style-type: none;
  display: flex;
  float: right;
padding: 0;
margin-right: 15px;
}

.site-nav-bd-l div {
  display: flex;
  margin-right: 16px;
}

.site-nav-bd-l div .login,
.register {
  font-size: 16px;
  color: #ff5000;
}

.site-nav-bd-l div li {
    font-size: 16px;

  margin-right: 8px;
}

.under-search-text {
  left: 390px;
  top: 170px;
  position: absolute;
  width: 830px;
}

.under-search-text ul {
  display: flex;
  list-style-type: none;
}

.site-nav-bd-l li,
.under-search-text li {
  margin-right: 16px;
}

.site-nav-bd-r li {
  margin-left: 16px;
}

.icon-gouwuche {
  color: #ff5000;
}

.site-nav-bd li:hover,
.site-nav-bd-r li router-link:hover,
.site-nav-bd-r li a:hover,
.under-search-text li:hover {
  cursor: pointer;
  color: #ff5000;
}

.under-my-taobao {
  width: 100px;
  height: 80px;
  background: white;
  margin-left: 1040px;
  margin-top: 6px;
  position: absolute;
  z-index: 9999;
  border-radius: 10px;
  border: #e0dddd 1px solid;
}

.under-shoucang {
  position: absolute;
  width: 100px;
  height: 80px;
  background: white;
  z-index: 999;
  left: 1470px;
  top: 43px;
  border-radius: 10px;
  border: #e0dddd 1px solid;
}

.under-openshop {
  position: absolute;
  width: 80px;
  height: 100px;
  background: white;
  z-index: 999;
  left: 1306px;
  top: 48px;
  border-radius: 10px;
  border: #e0dddd 1px solid;
}

.under-helpcenter {
  position: absolute;
  width: 85px;
  height: 150px;
  background: white;
  z-index: 999;
  left: 1560px;
  top: 43px;
  border-radius: 10px;
  border: #e0dddd 1px solid;
}

.under-qianniu {
  position: absolute;
  width: 100px;
  height: 200px;
  background: white;
  z-index: 999;
  left: 1400px;
  top: 48px;
  border-radius: 10px;
  border: #e0dddd 1px solid;
}

.under-my-taobao ul,
.under-shoucang ul {
  list-style-type: none;
  padding-left: 11px;
  margin-left: 0px;
  padding-top: 0px;
  justify-items: center;
}

.under-helpcenter ul {
  list-style-type: none;
  padding-left: 9px;
  margin-left: 0px;
  padding-top: 0px;
  padding-bottom: 6px;
  justify-items: center;
}

.under-qianniu ul,
.under-openshop ul {
  list-style-type: none;
  padding-left: 6px;
  margin-left: 0px;
  padding-top: 0px;
  padding-bottom: 6px;
  justify-items: center;
}

.under-my-taobao ul li,
.under-shoucang ul li {
  width: 60px;
  border-radius: 5px;
  display: block;
  padding: 0 8px;
  line-height: 24px;
  white-space: nowrap;
  color: #1f1f1f;
  font-size: 13px;
}

.under-helpcenter ul li,
.under-openshop ul li {
  width: 50px;
  border-radius: 5px;
  display: block;
  padding: 0 8px;
  line-height: 24px;
  white-space: nowrap;
  color: #1f1f1f;
  font-size: 13px;
}

.under-qianniu ul li {
  width: 75px;
  border-radius: 5px;
  display: block;
  padding: 0 8px;
  line-height: 24px;
  white-space: nowrap;
  color: #1f1f1f;
  font-size: 13px;
}

.under-my-taobao ul li:hover,
.under-shoucang ul li:hover,
.under-openshop ul li:hover,
.under-helpcenter ul li:hover,
.under-qianniu ul li:hover {
  background-color: rgb(238, 236, 236);
}

.div1 {
  margin-left: 1070px;
  margin-top: -9px;
  width: 75px;
  height: 16px;
  position: absolute;
  z-index: 888;
}

.div2 {
  position: absolute;
  width: 100px;
  height: 18px;

  z-index: 999;
  left: 1470px;
  top: 25px;
}

.div3 {
  position: absolute;
  width: 80px;
  height: 16px;

  z-index: 999;
  left: 1306px;
  top: 34px;
}

.div4 {
  position: absolute;
  width: 100px;
  height: 16px;

  z-index: 999;
  left: 1400px;
  top: 34px;
}

.div5 {
  position: absolute;
  width: 85px;
  height: 18px;
  z-index: 999;
  left: 1570px;
  top: 25px;
}
.toLogin,
.toRegister {
  font-size: 16px;
  color: #ff5000;
  text-decoration: none;
}
.toShoppingCart {
  font-size: 16px !important;
  color: rgba(0, 0, 0, 0.714);
  text-decoration: none;
}
.toShoppingCart:hover {
  color: #ff5000;
}

.site-nav-bd-r .iconfont.icon-xiala {
  transition: transform 0.3s ease;
  transform: rotate(0deg);
  display: inline-block; 
}

.site-nav-bd-r .iconfont.icon-xiala.changed {
  transform: rotate(180deg);
}
</style>
<script>
import router from "@/router";

export default {
  name: "HomeTop",
  data() {
    return {
      taobao: false,
      shoucang: false,
      openshop: false,
      qianniu: false,
      helpcenter: false,
    };
  },
};
</script>